import QtQuick
import QtQuick.Controls 2.0

Item{
    Row{
        anchors.centerIn: parent
        Text {
            text:"13:"
            font.pixelSize: slider.value
            color: "red"
        }

        Text {
            text:"32"
            antialiasing: true              //是否使用抗锯齿功能 默认开启
            renderType: Text.QtRendering    //渲染类型 默认Qt
            renderTypeQuality: /*Text.VeryHighRenderTypeQuality*/ 500
            font.pixelSize: slider.value
        }
    }

    Slider{
        id: slider
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        width: parent.width
        height: 10
        from: 12
        to: 1600
        value:26
        focus: false
        background: Rectangle{
            x: slider.leftPadding
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: slider.availableWidth
            height: implicitHeight
            radius: 2
            color: "#cccccc"

            Rectangle {
                width: slider.visualPosition * parent.width
                height: parent.height
                color: "#ffcc66"
                radius: 2
            }
        }

        handle: Rectangle {
            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 60
            implicitHeight: 26
            radius: 13
            color: slider.pressed ? "#ffb31a" : "#ffcc66"
            border.color: "#b37700"

            Text{
                anchors.centerIn: parent
                text: Math.ceil(slider.value) + "px"
            }
        }
    }
}
